

/*
实现逻辑：
  用户上传选择图片，上传到专门的图片服务器，返回图片外网的链接
*/

Page({

  data: {
    //顶部tap切换
    tabs:[
      {
        id:1,
        value:'体验问题',
        isActive:false
      },
      {
        id:2,
        value:'商品、商家投诉',
        isActive:false
      }
    ],
    //反馈问题类型
    types:[
      {
        id:1,
        title:'功能建议'
      },
      {
        id:2,
        title:'购买遇到问题'
      },
      {
        id:3,
        title:'性能问题'
      },
      {
        id:4,
        title:'其他'
      },
    ],
    inpStatus:false,//默认不添加样式
    textContent:'',//表单中文本域的内容
    src:'/icons/icon/uploads.png',//默认图片
    imagUrl1:[],//用户上传 的 图片的列表
    UploadImages:[],//外网的图片路径数组
    length:'',//图片长度
  },
  //点击选择分类
  typeBtn(e){
    console.log('e',e.currentTarget.dataset.id.id);
    const title = e.currentTarget.dataset.id.title;
    wx.showToast({
      title: title,
      icon:'none'
    })
  },

  //获取输入框里面的值
  heandInput(e){
    const inp = e.detail.value;
    this.setData({
      textContent:inp
    });
    if(inp){
      this.setData({
        inpStatus:true
      });
    }else{
      this.setData({
        inpStatus:false
      });
    }
  },

  //图片上传
  toChooseImage(){
    var vm = this;
    const length = vm.data.length;
    console.log('length',length);
    if(vm.data.length>2){
      wx.showToast({
        title: '最多上传3张图片',
        icon:'none'
      });
      return;
    };
    wx.chooseImage({
      count:3,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        wx.showToast({
          title: '图片上传成功',
          icon:'none'
        });
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;
        vm.setData({
          imagUrl1:tempFilePaths
        });

        // 准备图片上传到专门的图片服务器
        // 上传文件的 api 不支持 多个文件同时上传 遍历数组 挨个上传 
        //上传成功后 再将图片上传成功后的外网链接 组成一个数组
        //显示正在上传图标
        wx.showLoading({
          title: '正在上传中',
          icon:'none'
        });
        const imagUrl1 = vm.data.imagUrl1;
        imagUrl1.forEach((v,i) => {
          wx.uploadFile({
            filePath: v,//被上传的图片路径
            name: 'images',//上传的文件名称 后台来获取文件 file 自定义名称
            url: 'https://bsc.luowangtech.club/api/index/upload',//图片要上传到哪里 新浪图床  
            success:(res)=>{
              let url = res.data;
              console.log('url',url);
              //逆向转换JSON字符串后抽取网址
              const UploadImages = vm.data.UploadImages;
              UploadImages.push('https://bsc.luowangtech.club/' + JSON.parse(res.data).data);
              console.log('UploadImages',UploadImages);
              const length = UploadImages.length;
              wx.hideLoading({});
              vm.setData({
                UploadImages:UploadImages,
                length
              });
            }
          });
        });
        
      }
    })
  },

  //删除已上传的图片
  close(e){
    const index = e.target.dataset.index;
    const UploadImages = this.data.UploadImages;
    UploadImages.splice(index,1);
    wx.showToast({
      title: '图片删除成功',
      icon:'none'
    });
    this.setData({
      UploadImages,
      length:0
    });
  },

  //信息提交
  submit(){
    const textContent = this.data.textContent;
    const imagUrl1 = this.data.imagUrl1;

    // 表单信息提交中，文本内容需要进行合法性校验  就是不能输入空字符串 同时 也判断了不能为空
    if(!textContent.trim()){
      wx.showToast({
        title: '输入不合法！',
        icon:'none'
      });
      return;
    };
    if(imagUrl1.length == 0 || !textContent ){
      wx.showToast({
        title: '图片不能为空！',
        icon:'none'
      });
      return;
    };
    const info ={
      textContent,
      imagUrl1
    };
    console.log('提交的内容',info);
    setTimeout(()=>{
      wx.showToast({
        title: '信息提交成功！',
        icon:'none'
      });
    },500)
    wx.navigateBack({});
  },

})